<template>
    <div class="storeDetails">
        <Header title="店铺"></Header>
        <div class="content">
            <div class="img"></div>
            <div class="foodClassify">
                <div class="name">
                    {{ data.title }}
                    <img :src="data.img" alt="">
                </div>
            </div>
            <!-- 店铺商品列表 -->
            <div class="classify">
                <van-tabs color="#ffc400">
                    <van-tab v-for="(item,index) in data.storeData" :key="index" :title="item.name">
                        <FoodList :foodDate="item.data" :index="index"></FoodList>
                    </van-tab>
                </van-tabs>
            </div>
            <!-- 店铺下面的加入购物车按钮 -->
            <van-action-bar>
              <van-action-bar-icon icon="chat-o" text="客服" @click="service" />
              <van-action-bar-icon icon="cart-o" text="购物车" :badge="store.state.Cart.cartList.length" />
              <van-action-bar-button type="warning" text="加入购物车"  @click="handleAddCart"/>
              <van-action-bar-button type="danger" text="立即购买"  @click="clickBuy"/>
            </van-action-bar>
        </div>
    </div>
</template>

<script setup>
import Header from '../../components/Header.vue';
import FoodList from './components/FoodList.vue';
import { onMounted, reactive } from 'vue';
 let data = reactive({
      title: "鱼拿酸菜鱼",
      img: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
      storeData: [
        {
          name: "点菜",
          data: {
            content: "点菜",
            items: [
              {
                text: "热销套餐",
                children: [
                  {
                    pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
                    title: "招牌酸菜鱼",
                    num: 0,
                    price: 25.0,
                    id: 0,
                    add: true,
                  },
                  {
                    pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
                    title: "藤椒酸菜鱼",
                    num: 0,
                    price: 25.0,
                    id: 1,
                    add: true,
                  },
                ],
              },
              {
                text: "澳洲肥牛",
                children: [
                  {
                    pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbkimg.cdn.bcebos.com%2Fpic%2F8694a4c27d1ed21b0ef4f3137f24cac451da80cb91b8&refer=http%3A%2F%2Fbkimg.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645407747&t=ea2c9f772ba0df3a2d1b00b962875460",
                    title: "酸汤肥牛",
                    num: 0,
                    price: 25.0,
                    id: 3,
                    add: true,
                  },
                  {
                    pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbkimg.cdn.bcebos.com%2Fpic%2F8694a4c27d1ed21b0ef4f3137f24cac451da80cb91b8&refer=http%3A%2F%2Fbkimg.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645407747&t=ea2c9f772ba0df3a2d1b00b962875460",
                    title: "香辣肥牛",
                    num: 0,
                    price: 25.0,
                    id: 4,
                    add: true,
                  },
                ],
              },
              {
                text: "超级折扣",
                children: [
                  {
                    pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
                    title: "无骨酸菜鱼+肥牛双拼",
                    num: 0,
                    price: 25.0,
                    id: 5,
                    add: true,
                  },
                  {
                    pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
                    title: "香辣水煮鱼+肥牛双拼",
                    num: 0,
                    price: 25.0,
                    id: 6,
                    add: true,
                  },
                ],
              },
            ],
          },
        },
        { name: "评价", data: { content: "评价" } },
        { name: "商家", data: { content: "商家" } },
      ],
 });
    // 切换步进器显示隐藏


// 客服消息弹窗
// 引入toast
import { Toast  } from 'vant';
const service = () => {
  Toast({
    message: '正在开发中，敬请期待...',
    icon: 'fail',
  });
}
// 引入Vuex
import { useStore } from 'vuex';
const store = useStore();

// 加入购物车
const handleAddCart = (type) => {
  let newList = [];
  data.storeData.forEach(item => {
    item.data.items?.forEach(items => {
      items.children.forEach(itemss => {
        if (itemss.num > 0) {
          newList.push(itemss)
        }
      })
    })
  })
  if (newList.length === 0) {
    Toast({
      message: '请选择商品...',
      icon: 'fail',
    });
    return;
  }
  store.commit('AddCart', newList)
  
  type == 'buy' ? goCart() : '';
}

// 立即购买 跳转购物车页面
import { useRouter } from 'vue-router';
let router = useRouter();

// 跳转购物车方法
const goCart = () => {
   router.push('/cart')
}
// 立即购买
const clickBuy = () => {
  handleAddCart('buy')
}


</script>

<style scoped lang="less">
.storeDetails{
    height:100%;
    display: flex;
    flex-direction: column;
    .content{
        flex:1;
        overflow-y: auto;
        .img{
            background: url('../../assets/yuna.jpg')no-repeat center/cover;
            width:100%;
            height:150px;
        }
        .foodClassify{
            background-color: #fff;
            margin-top:-30px;
            border-radius: 20px 20px 0 0;
            .name{
                display: flex;
                padding:20px;
                justify-content: space-between;
                font-size:30px;
                img{
                    width:80px;
                    height:80px;
                    border-radius: 10px;
                    margin-top:-30px;
                }
            }
        }
    }
    .van-tree-select__nav-item{
      background-color: #ffc400;
    }
}
</style>
